/* eslint-disable */
<template>
  <div ref="echart" class="echarts"></div>
</template>

<script>
/* eslint-disable */
export default {
  props: ["timesharing", "startdate"],
  name: "echarts",
  data() {
    return {
      echart: null,

      nowday: 1,
      yesday: 2
    };
  },
  created() {
    this.nowday = this.getDay(0);
    this.yesday = this.getDay(-1);
    // console.log(this.nowday);
    // console.log(this.yesday);
  },
  mounted() {
    this.initData();
    window.onresize = () => {
      this.echart.resize();
    };
    // console.log(this.count1)
    // console.log(this.a)
    // console.log(this.timesharing)
    // this.normalizedSize()
  },
  //   computed: {
  //   normalizedSize: function () {
  //     console.log(this.key)
  //     return this.key
  //   }
  // },
  watch: {
    timesharing() {
      // console.log(this.timesharing);
      // console.log(this.startdate);
      this.initData();
    }
  },
  methods: {
    initData() {
      let _this = this;
      this.$nextTick(() => {
        // console.log(this.startdate);
        // console.log(this.nowday);
        // console.log(this.yesday);
        let dataname = [];
        let countnum = [];
        let countnummax = 0;
        let dupRemovalCount = [];
        let dupRemovalCountmax = 0;
        for (let i = 0; i < this.timesharing.length; i++) {
          if (this.startdate == this.nowday || this.startdate == this.yesday) {
            dataname.push(this.timesharing[i].key.substring(11));
          } else dataname.push(this.timesharing[i].key.substring(0, 11));
          if (this.timesharing[i].count >= countnummax) {
            countnummax = this.timesharing[i].count;
          }
          countnum.push(this.timesharing[i].count);
          if (this.timesharing[i].dupRemovalCount >= dupRemovalCountmax) {
            dupRemovalCountmax = this.timesharing[i].dupRemovalCount;
          }
          dupRemovalCount.push(this.timesharing[i].dupRemovalCount);
        }
        // console.log(this.timesharing)
        const myChart = this.$echarts.init(this.$refs.echart);
        myChart.setOption({
          color: ['#2c9dfb', '#FF6145'],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999"
              }
            }
          },

          legend: {
            data: ["数量", "去重数量"]
          },
          xAxis: [
            {
              type: "category",
              data: dataname,
              axisPointer: {
                type: "shadow"
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              name: "数量",
              min: 0,
              max: countnummax,
              interval: countnummax / 5,
              axisLabel: {
                formatter: "{value} 人"
              }
            },
            {
              type: "value",
              name: "去重数量",
              min: 0,
              max: dupRemovalCountmax,
              interval: dupRemovalCountmax / 5,
              axisLabel: {
                formatter: "{value} 人"
              }
            }
          ],
          series: [
            {
              name: "数量",
              type: "bar",
              data: countnum
            },
            {
              name: "去重数量",
              type: "line",
              // data: dupRemovalCountnum
              data: dupRemovalCount
            }
          ]
        });
        this.echart = myChart;
      });
    },
    getDay(day) {
      let today = new Date();
      let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      let tYear = today.getFullYear();
      let tMonth = today.getMonth();
      let tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      let m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    }
  }
};
</script>

<style scoped>
.echarts {
  height: 100%;
}
</style>
